<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue中样式 -- class</title>
        <script src="../lib/vue-2.4.0.js"></script>

        <style>
            .red {
                background-color: red;
            }
            .thin {
                font-weight: 200;
            }
            .italic {
                font-style: italic;
            }
            .active {
                letter-spacing: 0.5em;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 普通的html设置 class属性值 -->
            <h1 class="red thin">1嗯嗯嗯嗯嗯嗯嗯嗯是水水水水h</h1>

            <!-- 第一种方式 Vue中使用 v-bind 设置class属性： 使用数组 -->
            <h1 v-bind:class="['red','thin']">2嗯嗯嗯嗯嗯嗯嗯嗯是水水水水h</h1>

            <!-- 第二种方式 Vue中使用 v-bind 设置class属性： 使用数组，并在数组中使用三元表达式 -->
            <h1 v-bind:class="['red','thin', flag? 'italic':'']">
                3嗯嗯嗯嗯嗯嗯嗯嗯是水水水水h
            </h1>

            <!-- 第三种方式 Vue中使用 v-bind 设置class属性： 使用数组，并在数组中使用 对象 -->
            <h1 v-bind:class="['red','thin', {'active': flag}]">
                4嗯嗯嗯嗯嗯嗯嗯嗯是水水水水h
            </h1>

            <!-- 第四种方式 Vue中使用 v-bind 设置class属性： 使用对象 -->
            <!-- 对象： 对象的属性可带引号，也可以不带引号 -->
            <h1 v-bind:class="{red:true,thin:true,'active':flag,'italic': flag}">5嗯嗯嗯嗯嗯嗯嗯嗯是水水水水h</h1>

            <!-- 将对象指向属性的引用 -->
            <h1 v-bind:class="classObj">6嗯嗯嗯嗯嗯嗯嗯嗯是水水水水h</h1>

            <!-- 将对象指向属性的引用: classObj2 是一个返回对象的计算属性 -->
            <h1 v-bind:class="classObj2">7嗯嗯嗯嗯嗯嗯嗯嗯是水水水水h</h1>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    flag: true,

                    /**
                     * vue中data属性里的数据不能相互引用，如果必须引用，建议使用computed计算属性关联。
                     *
                     *  这里的 classObj 对象中 有引用 flag属性，其实查看在内存中 classObj中的 引用 this.flag 的属性是 undefined
                     *
                     *  如果想使用 this.flag的值，辣么需要采用 classObj2的方式
                     */
                    classObj: {
                        red: true,
                        thin: true,
                        active: null,
                        italic: this.flag
                    },
                },
                methods: {},
                computed:{
                    classObj2() {
                        return {
                            red:true,
                            thin:true,
                            active:this.flag,
                            italic: this.flag,
                        }
                    },
                }
            });
        </script>
    </body>
</html>
